<template>
	<view>
		<tab-nav :tabData="tabData" :tabIndex="tabIndex" @switchStaus="switchStatus"></tab-nav>
		<template v-if="isHasDataFlag">
			<yy-rec 
				:zxsList="zxsList" 
				:fromPage="fromPage" 
				@goYyDet="goYyDet"
				@goAddReport="goAddReport"
				@cancelYy="cancelYy"
			></yy-rec>
			<loading-view :loading="loading"></loading-view>
		</template>
		<template v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</template>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable">
			<view class="alertContent">是否确定取消本次咨询预约?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancel">取消</view>
				<view class="sureBtn" @tap="sureCancel">确认</view> 
			</view>
		</common-alert>
	</view>
</template>

<script>
	import TabNav from '@/components/tab-nav/tab-nav.vue'
	import YyRec from './components/YyRec.vue'
	import { getZzXlzxList } from '@/api/mine/index.js'
	import { cancelXlzx } from '@/api/xlzx/index.js'
	export default {
		components:{
			TabNav,
			YyRec
		},
		data(){
			return{
				tabData:[
					{id:0,name:'全部'},
					{id:1,name:'待咨询'},
					{id:6,name:'已完成'},
					{id:7,name:'已取消'}
				],
				tabIndex:0,
				nowPage:1,
				zxStatus:0,
				hasNextFlag:null,
				isHasDataFlag:null,
				zxsList:[],
				loading:false,
				fromPage:'',//yyRec zxRec
				isRefreshFlag:false,
				maskClosable:false,
				showAlertFlag:false,
				currOrderId:''
			}
		},
		onLoad(option){
			this.fromPage = option.fromPage;
			this.getList();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.initParams();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading && this.hasNextFlag){
				this.getList();
			}
		},
		methods:{
			getList(){
				let { nowPage,zxsList } = this;
				this.loading = true;
				let field = { zxStatus:this.zxStatus,page:this.nowPage,limit:this.limit }
				//console.log(field)
				getZzXlzxList(field).then(res=>{
					//console.log(res)
					this.hasNextFlag = res.data.hasNext;
					nowPage += 1;
					zxsList.push( ...res.data.datas );
					this.zxsList = zxsList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					//console.log(err)
					this.loading = false;
					this.isHasDataFlag=false;
				});
			},
			switchStatus(index,id){
				this.tabIndex = index;
				this.zxStatus = id;
				this.initParams();
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.zxsList = [];
				this.getList();
			},
			goYyDet(orderId){
				uni.navigateTo({
					url:'/pages/subMine/myYy/orderDet?orderId=' + orderId + '&fromPage=' + this.fromPage
				})
			},
			goAddReport(item,opt){
				uni.navigateTo({
					url:'/pages/subMine/myYy/addZxRep?orderId=' + item.id + '&currType=' + opt + '&zxName=' + item.userName
				})
			},
			cancelYy(id){
				this.currOrderId = id;
				this.showAlertFlag = true;
			},
			sureCancel(){
				uni.showLoading({ title: '取消中...', mask: true });
				let field = { id:this.currOrderId }
				cancelXlzx(field).then(res=>{
					uni.showToast({ title: '取消成功' });
					setTimeout(()=>{
						this.showAlertFlag = false;
						this.initParams();
					},1500);
				}).catch(err=>{
					this.showAlertFlag = false;
				})
			},
			cancel(){
				this.showAlertFlag = false;
			}
		}
	}
</script>

<style lang="scss">
	@import url("/static/css/common/alert.css");
	page{
		background: $pss-bg-primary;
	}
</style>